<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { register } from "../../services/login";

const router = useRouter();
const option = {
  width: 400,
  time: 60,
  submitBtn: false,
  emptyBtn: false,
  menuPosition: "100px",
  column: [
    {
      row: true,
      maxlength: 32,
      showWordLimit: true,
      span: 20,
      prop: "username",
      label: "用户名",
      autocomplete: "off",
      rules: [{ required: true, message: "请输入用户名", trigger: "blur" }],
    },
    {
      row: true,
      span: 20,
      prop: "password",
      label: "密码",
      type: "password",
      showPassword: true,
      autocomplete: "off",
      rules: [{ required: true, message: "请输入密码", trigger: "blur" }],
    },
    {
      span: 20,
      prop: "verifyPassword",
      label: "确认密码",
      type: "password",
      showPassword: true,
      autocomplete: "off",
      rules: [{ required: true, message: "请输入密码", trigger: "blur" }],
    },
  ],
};
//表单数据
const obj = ref({});

//----------方法-------------

//注册
const userRegister = function (form, done) {
  register(obj.value)
    .then((res) => {
      router.push("/login");
    })
    .catch((error) => {
      done(form);
    });
};
</script>

<template>
  <div class="register">
    <el-card class="box-card">
      <span>用户-注册</span>
      <avue-form
        class="register_from"
        ref="form"
        :option="option"
        v-model="obj"
        @submit="userRegister"
      >
      </avue-form>
      <!-- 自定义按钮 -->
      <el-button
        type="primary"
        size="default"
        plain
        @click="$refs.form.submit()"
        >注册</el-button
      >
      <span style="margin-left: 3%; text-align: center; font-size: 12px">
        <router-link to="/login">登录</router-link>
      </span>
    </el-card>
    <div class="record">
      <a href="https://beian.miit.gov.cn/" target="_blank">备案号： 蜀ICP备19022468号-2</a>
    </div>
  </div>
</template>

<style lang="less" scoped>
.register_from {
  margin-top: 2%;
  /* margin-bottom: 1%; */
}
.box-card {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30%;
  overflow: visible;
  width: 40%;
  height: 40%;
  margin-top: 14%;
  text-align: center;
}
.register {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url("../../assets/images/AI4.webp");
  background-size: cover;
}
.record {
  text-align: right;
  margin-bottom: 1%;
  margin-right: 1%;
  a {
    text-decoration: none;
  }
}
</style>
